import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Divider, Input, Select } from 'antd';
import styles from './styles.less';
// import { FormItemLayout } from '../form/formPub';
import commonFunc from './commonFunc';
import { PrimaryC } from '../button';
import { uniqueId } from 'lodash';
const FormItemLayout = {
  labelCol: {
    xs: { span: 4, offset: 0 },
    sm: { span: 8, offset: 0 },
    md: { span: 8, offset: 0 },
    lg: { span: 8, offset: 0 },
    xl: { span: 7, offset: 0 },
    xxl: { span: 7, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 18, offset: 0 },
    sm: { span: 14, offset: 0 },
    md: { span: 14, offset: 0 },
    lg: { span: 14, offset: 0 },
    xl: { span: 15, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};
class OtherNodePanel extends Component {
  // 默认值
  static defaultProps = {
    id: undefined, // 节点ID
    name: undefined, // 节点名称
    nameChanged: () => {}, // 名字变更事件
    mode: 'view', // 默认查看模式
  };

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.id !== nextProps.id) {
      this.props.form.setFieldsValue({ id: nextProps.id });
    }
    if (this.props.name !== nextProps.name) {
      this.props.form.setFieldsValue({ name: nextProps.name == null ? undefined : nextProps.name });
    }
  }

  componentDidMount() {
    this.props.form.setFieldsValue({
      id: this.props.id,
      name: this.props.name,
      condition: this.props.condition,
    });
  }
  // 点击保存设置
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // 抛出保存设置事件
        this.props.saveOtherNode(values);
      }
    });
  };

  render() {
    const { form, nameChanged, mode } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={`${styles.SequenceFlowPannel}`}>
        <div>其他设置</div>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item label='编号' {...FormItemLayout} className={'formCls1'}>
            {getFieldDecorator('id')(<Input disabled />)}
          </Form.Item>
          <Form.Item label='名称' {...FormItemLayout} className={'formCls1'}>
            {getFieldDecorator('name', {
              // rules: [{ required: true, message: '名称不能为空!' }],
            })(<Input disabled={mode === 'view'} onChange={nameChanged} />)}
          </Form.Item>
          {mode === 'view' ? null : (
            <Form.Item className={'saveClass'}>
              <PrimaryC title='保存设置' htmlType='submit' />
            </Form.Item>
          )}
        </Form>
      </div>
    );
  }
}
// props默认值
OtherNodePanel.propsTypes = {
  id: PropTypes.string, // 节点ID
  name: PropTypes.string, // 节点名称
  condition: PropTypes.string, // 条件
  nameChanged: PropTypes.func, // 名字变更事件
  mode: PropTypes.string, // 模式（view-不可编辑，editor-可编辑）
};

export default Form.create()(OtherNodePanel);
